<template>
  <div class="main">
    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">
        <el-form-item
          class="input-prepend restyle"
          prop="username"
          :rules="[
            {
              required: true,
              message: '请输入你的用户名',
              trigger: 'blur',
            },
          ]"
        >
          <div>
            <el-input
              type="text"
              placeholder="用户名"
              v-model="params.username"
            />
            <i class="el-icon el-icon-user"/>
          </div>
        </el-form-item>
        <el-form-item
          class="input-prepend restyle no-radius"
          prop="email"
          :rules="[
            {
              required: true,
              message: '请输入邮箱!',
              trigger: 'blur',
            },
            { validator: checkMail, trigger: 'blur' },
          ]"
        >
          <div>
            <i class="el-icon el-icon-message"/>
            <el-input type="text" placeholder="邮箱" v-model="params.email"/>
          </div>
        </el-form-item>
        <el-form-item
          class="input-prepend restyle no-radius"
          prop="code"
          :rules="[
            {
              required: true,
              message: '请输入验证码',
              trigger: 'blur',
            },
          ]"
        >
          <div
            style="width: 100%; display: block; float: left; position: relative"
          >
            <el-input type="text" placeholder="验证码" v-model="params.code"/>
            <i class="el-icon el-icon-edit"/>
          </div>
          <div
            class="btn"
            style="position: absolute; right: 0; top: 6px; width: 40%"
          >
            <a
              href="javascript:"
              type="button"
              @click="getCodeFun()"
              :value="codeTest"
            >{{ codeTest }}</a
            >
          </div>
        </el-form-item>
        <el-form-item
          class="input-prepend"
          prop="password"
          :rules="[
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
          ]"
        >
          <div>
            <el-input
              type="password"
              placeholder="设置密码"
              v-model="params.password"
            />
            <i class="el-icon el-icon-lock"/>
          </div>
        </el-form-item>
        <div class="btn">
          <input
            type="button"
            class="sign-up-button"
            value="注册"
            @click="submitRegister()"
          />
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import registerApi from '@/api/register'

export default {
  layout: 'register_layout',
  data () {
    return {
      params: {
        username: '',
        password: '',
        email: '',
        code: '',
      },
      second: 120, //倒计时间
      codeTest: '获取验证码',
    }
  },
  created () {
  },
  methods: {
    // 验证码
    timeDown () {
      this.codeTest = this.second
      let result = setInterval(() => {
        --this.codeTest
        if (this.codeTest < 1) {
          clearInterval(result)
          this.second = 120
          this.codeTest = '获取验证码'
        }
      }, 1000)
    },
    // 发送验证码的方法
    getCodeFun () {
      registerApi.sendVerificationCode(this.params.email).then((response) => {
        if (response.data.success) {
          //调用倒计时的方法
          this.timeDown()
        } else {
          this.$message({
            type: 'error',
            message: response.data.error.message,
          })}
      })
    },
    // 点击注册按钮触发
    submitRegister () {
      registerApi.submitRegister(this.params).then(response => {
        //跳转登录页面
        if (response.data.success) {
          this.$message({
            type: 'success',
            message: '注册成功!',
          })
          this.$router.push({ path: '/login_password' })
        } else {
          this.$message({
            type: 'error',
            message: response.data.error.message,
          })
        }
      })
    },
    // 校验邮箱
    checkMail (rule, value, callback) {
      //debugger
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          value
        )
      ) {
        return callback(new Error('邮箱格式不正确'))
      }
      return callback()
    },
  },
}
</script>

<style>
.el-icon {
  vertical-align: middle;
  margin-top: 13px
}
</style>
